<ion-header>
  <ion-navbar color="primary">
    <ion-title>{{toUser.name}}</ion-title>
  </ion-navbar>
</ion-header>
<ion-content>
  <div class="message-wrap">
      <div *ngFor="let msg of msgList" class="message" [class.left]=" msg.userId === toUser.id " [class.right]=" msg.userId === user.id ">
          <img class="user-img" [src]="msg.userAvatar" alt="" src="">
          <ion-spinner name="dots" *ngIf="msg.status === 'pending'"></ion-spinner>
          <div class="msg-detail">
            <div class="msg-info">
              <p>
                {{msg.userName}}&nbsp;&nbsp;&nbsp;{{msg.time}}</p>
            </div>
            <div class="msg-content">
              <span class="triangle"></span>
              <p class="line-breaker ">{{msg.message}}</p>
            </div>
          </div>
        </div>
  </div>
</ion-content>


<ion-footer no-border [style.height]="showEmojiPicker ? '255px' : '55px'">
    <div class="input-wrap">
      <button ion-button clear icon-only item-right (click)="switchEmojiPicker()">
        <ion-icon name="md-happy"></ion-icon>
      </button>
      <textarea #chat_input
                placeholder="来吐槽吧..."
                [(ngModel)]="editorMsg"
                (keyup.enter)="sendMsg()"
                (focusin)="onFocus()">
      </textarea>
      <button ion-button clear icon-only item-right (click)="sendMsg()">
        <ion-icon name="ios-send" ios="ios-send" md="md-send"></ion-icon>
      </button>
    </div>
    <!-- <emoji-picker [(ngModel)]="editorMsg"></emoji-picker> -->
      
  </ion-footer>